import Search from "@/components/public/Search";
import { View, Image, Text } from "@tarojs/components";
import ico_shouc from "@/assets/image/ico_shouc.svg";
import ico_time from "@/assets/image/ico_time.svg";
import "./index.scss";
import { useState } from "react";
import { getCollection } from "@/services/entities/all";
import { getGlobalData } from "@/global_data";
import {
  formatDateTime,
  getLevelImage,
  getLevelName,
  linkWithParams,
} from "@/helper/utils";
import { routes } from "@/constants/routes";
import { useDidShow } from "@tarojs/taro";

const MyPage = () => {
  const [list, setList] = useState<any>([]);
  const [storeName, setStoreName] = useState("");

  const init = () => {
    const userData = getGlobalData("userInfo");
    const { openId } = userData;
    getCollection({ openId, storeName }).then((res) => {
      setList(res);
    });
  };
  useDidShow(() => {
    init();
  });
  return (
    <View className="my-container bg-page">
      <View className="dis-flex align-center pd-lr-20 pd-tb-16 bg-ffffff">
        <Search
          placeholder="商家名称"
          className="flex-1"
          onInput={(value) => {
            setStoreName(value);
          }}
          right={
            <View
              onClick={() => {
                init();
              }}
              className="bg-394B5D cl-white fs-28 lh-38 pd-tb-8 border-box pd-lr-38 br-28 mr-4"
            >
              搜索
            </View>
          }
        />
        {/* <View className="ml-80">时间</View> */}
      </View>
      <View className="flex-column pd-lr-16">
        {list.map((item) => {
          return (
            <View
              key={item.name}
              className="dis-flex bg-ffffff pd-lr-30 pd-tb-36 border-box mt-16 br-8"
              onClick={() => {
                linkWithParams(routes.ROUTES_SHOP_DETAIL, { storeId: item.id });
              }}
            >
              <Image className="card-img" src={getLevelImage(item.level)} />
              <View className="ml-24 flex-column flex-1">
                <View className="dis-flex align-center">
                  <Text className="fs-28 lh-38">{item.name}</Text>
                  <View className="ml-8 bg-4EBE6F br-16 pd-tb-2 pd-lr-16 border-box fs-20 lh-28 cl-white">
                    {getLevelName(item.level)}
                  </View>
                </View>
                <View className="dis-flex align-center justify-between mt-20">
                  <View className="dis-flex align-center">
                    <Image className="timer-img" src={ico_time} />
                    <Text className="ml-12 fs-24 lh-34 cl-848484">
                      {formatDateTime(item.createTime)}
                    </Text>
                  </View>
                  <View className="dis-flex align-center">
                    <Image className="collect-img" src={ico_shouc} />
                    <Text className="ml-8 fs-24 lh-34 cl-E14848">已收藏</Text>
                  </View>
                </View>
              </View>
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default MyPage;
